<script setup lang="ts">
import { ref, watch } from "vue";
const
  props = defineProps({
    modelValue: { type: String, },
  }), type = ref("");
function init() {
  type.value = "img";
}
watch(() => props, init, { deep: true, immediate: true });
</script>
<template>
  <div class="whf xcc ViewUrl">
    <img v-if="type == 'img'" :src="modelValue" class="mimg" @error="type = 'audio'" />
    <audio v-else-if="type == 'audio'" controls preload="metadata" :src="modelValue" class="wf"
      @error="type = 'video'" />
    <video v-else-if="type == 'video'" controls preload="metadata" :src="modelValue" class="wf"
      @error="type = 'file'" />
    <div v-else class="mac-ico-file"><a class="wf" :href="modelValue" target="_blank">点击下载</a></div>
  </div>
</template>
<style scoped lang="scss">
.ViewUrl {
  >.mac-ico-file {
    >* {
      padding: 0;
    }
    &::before {
      font-size: 2em;
      margin-right: 0.4em;
    }
  }
}
</style>